<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：v-model双向绑定</h1>
            
            <h3>我们可以使用v-model指令在表单的各种DOM元素进行双向的数据绑定，他会根据我们空间的类型自动更新元素
                同时，他会忽略所有表单元素中的value，checked，selected等属性的初始值
            </h3>
            <h3>1.单行文本框</h3>
            <input type="text" v-model="singleText">{{singleText}}
            <h3>2.多行文本框</h3>
            <textarea v-model="multiText"></textarea>{{multiText}}
            <h3>3.单选框</h3>
                <h4>单选框在实际中不单独使用，一般是两个及以上，可以设置一个共有的v-model中的变量
                    那么就可以实现radiogroup的效果
                </h4>
                <input type="radio" value="A" v-model="radioValue">上课
                <input type="radio" value="B" v-model="radioValue">下课
                <input type="radio" value="C" v-model="radioValue">吃饭
                <input type="radio" value="D" v-model="radioValue">睡觉
                {{radioValue}}
            <h3>4.单个复选框，单个复选框通常用来True或False的选择</h3>
                <input type="checkbox" v-model="toggleValue">{{toggleValue}}
            <h3>5.多个复选框；v-model接受数组类型的变量</h3>
                <input type="checkbox" v-model="checkedValue" value="漂亮">A.1
                <input type="checkbox" v-model="checkedValue" value="丑陋">B.2
                <input type="checkbox" v-model="checkedValue" value="优秀">C.3
                <input type="checkbox" v-model="checkedValue" value="差劲">D.4
                {{checkedValue.join(',')}}    
            <h3>6.单项下拉选择框</h3>
                <select v-model="singleSelect">
                    <option value="杭州">杭州</option>
                    <option value="温州">温州</option>
                    <option value="衢州">衢州</option>
                    <option value="金华">金华</option>
                    <option value="绍兴">绍兴</option>
                    <option value="湖州">湖州</option>
                    <option value="舟山">舟山</option>
                    <option value="苏州">苏州</option>
                    <option value="福州">福州</option>
                    
                </select>
                {{singleSelect}}
            <h3>7.多项下拉选择框</h3>
            <select multiple v-model="multiSelect">
                <option value="杭州">杭州</option>
                <option value="温州">温州</option>
                <option value="衢州">衢州</option>
                <option value="金华">金华</option>
                <option value="绍兴">绍兴</option>
                <option value="湖州">湖州</option>
                <option value="舟山">舟山</option>
                <option value="苏州">苏州</option>
                <option value="福州">福州</option>
            </select>
            {{multiSelect}}
            <!-- 选择多个时按住ctrl -->
        <h1>知识点2.v-model修饰符</h1>
            <h3>1.lazy修饰符v-model在每次input输入后触发输入框的值与数据进行同步更新,添加lazy修饰符后，转变为change事件同步</h3>
            <input type="text" v-model.lazy="text">{{text}}
            <h3>2.number修饰符：可以将用户输入的值转换为数字型</h3>
            <input type="text" v-model.number="num">{{num+1}}
            <h3>3.trim修饰符：可以自动过滤前后的空白字符</h3>
            <input type="text" v-model.trim="text">{{text+'你好'}}
    </div>
    
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data() {
            return {
                singleText:'',
                multiText:'',
                radioValue:'',
                toggleValue:'',
                checkedValue:[],
                singleSelect:'',
                text:'',
                num:1
            
            }
        }
    }).mount('#app')
</script>